<template>
    <div class="staff-management">
        <div class="head">
            <el-form :model="queryParams" ref="queryForm" :inline="true">
                <el-form-item label="负责人ID" prop="userId">
                    <el-input v-model="queryParams.userId" placeholder="请输入负责人ID" clearable style="width: 240px" />
                </el-form-item>

                <el-form-item label="订单状态" prop="campusOrderStatus">
                    <el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态" filterable>
                        <el-option label="已支付" value="0"></el-option>
                        <el-option label="未支付" value="1"></el-option>
                        <el-option label="已退款" value="2"></el-option>
                        <el-option label="已取消" value="3"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" size="default" @click="getOrderList()">搜索</el-button>
                    <el-button size="default" @click="resetBtn">重置</el-button>
                </el-form-item>
            </el-form>

            <div class="middle">
                <div class="add" style="margin-left: 20px;">
                    <div class="button">
                        <el-button type="primary" :icon="Plus" @click="handleAdd()" plain>新增</el-button>
                    </div>
                </div>
                <div class=" add">
                    <div class="button">
                        <el-button type="success" :icon="Edit" @click="handleEdit()" :disabled="single"
                            plain>修改</el-button>
                    </div>
                </div>
                <div class=" add">
                    <div class="button">
                        <el-button type="danger" :icon="Delete" @click="handleDelete()" :disabled="multiple" plain>
                            删除
                        </el-button>
                    </div>
                </div>
            </div>

            <div class="end">
                <el-table :data="tableData" row-key="orderId" style="width: 1500px;margin-bottom: 200px; "
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" />
                    <el-table-column label="订单号" prop="orderId">
                        <template #default="scope">{{ scope.$index + 1 }}</template>
                    </el-table-column>
                    <el-table-column property="userId" label="负责人ID" />
                    <el-table-column property="orderAmount" label="订单金额" />
                    <el-table-column property="contractId" label="合同ID" />
                    <el-table-column property="createTime" label="创建时间">
                        <template #default="scope">
                            {{ formatDate(scope.row.createTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column property="updateTime" label="更新时间">
                        <template #default="scope">
                            {{ formatDate(scope.row.updateTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="订单状态">
                        <template #default="scope">
                            <el-button type="success" v-if="scope.row.orderStatus == 0" plain>已支付</el-button>
                            <el-button type="info" v-if="scope.row.orderStatus == 1" plain>未支付</el-button>
                            <el-button type="primary" v-if="scope.row.orderStatus == 2" plain>已退款</el-button>
                            <el-button type="danger" v-if="scope.row.orderStatus == 3" plain>已取消</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column property="note" label="备注" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button size="small" @click="handleEdit(scope.row)">
                                修改
                            </el-button>
                            <br>
                            <!-- <el-button size="small" type="danger" @click="handleDelete(scope.row)">
                                删除
                            </el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
                <div style="margin-left: 600px;">
                    <div class="demo-pagination-block">
                        <el-pagination v-model:current-page="queryParams.pageNum"
                            v-model:page-size="queryParams.pageSize" :page-sizes="[1, 2, 3, 100]"
                            layout="total, sizes, prev, pager, next, jumper" :total="total"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </div>
                </div>
            </div>

            <el-dialog v-model="dialogVisible" :modal="true" width="800px">
                <el-form :model="formData" :rules="rules" ref="staffForm">
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="订单号" label-width="120px" prop="orderId">
                                <el-input v-model="formData.orderId" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="订单负责人ID" label-width="120px" prop="userId">
                                <el-input v-model="formData.userId" autocomplete="off" :disabled="disabled"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="订单金额" label-width="120px" prop="orderAmount">
                                <el-input v-model="formData.userId" autocomplete="off" :disabled="disabled"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="订单状态" label-width="120px" prop="position">
                                <el-input v-model="formData.position" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="联系电话" label-width="120px" prop="phone">
                                <el-input v-model="formData.phone" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="邮箱" label-width="120px" prop="email">
                                <el-input v-model="formData.email" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="订单状态" label-width="120px" prop="orderStatus">
                                <el-select v-model="formData.staffStatus" placeholder="请选择状态">
                                    <el-option label="已支付" value="0"></el-option>
                                    <el-option label="未支付" value="1"></el-option>
                                    <el-option label="已退款" value="2"></el-option>
                                    <el-option label="已取消" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="22">
                            <el-form-item label="备注" label-width="120px" prop="remark">
                                <el-input v-model="formData.remark" type="textarea" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="handleCanle">取消</el-button>
                        <el-button type="primary" @click="handleConfirm">
                            确认
                        </el-button>
                    </div>
                </template>
            </el-dialog>

            <el-dialog v-model="deleteDialog" title="提示" width="500">
                <span>确认要删除选中的员工吗？</span>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="deleteDialog = false">取消</el-button>
                        <el-button type="primary" @click="deleteConfirm">
                            确定
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Calendar, Search, Edit, Plus, Delete } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {
    getAllCampusOrder
    // getSelectByStatus
} from '@/api/campusOrder'

const staffForm = ref(null);
const single = ref(true)
const multiple = ref(true)
const total = ref(10);
const dialogVisible = ref(false)
const selected = ref("add");
const disabled = ref(false)
const selectRow = ref([]);
const deleteDialog = ref(false)
const deleteRow = ref([])
const departmentList = ref([])

onMounted(async () => {
    await getOrderList();
    // 调试检查
    console.log('当前分页参数:', queryParams.value);
    console.log('表格数据:', tableData.value);
    console.log('总数:', total.value);
})

// 查询参数
const queryParams = ref({
    orderId: '',
    userId: '',
    orderAmount: '',
    createTime: '',
    orderStatus: '',
    updateTime: '',
    contractId: '',
    tradeId: '',
    pageNum: 1,
    pageSize: 10
})

// 表单参数
const formData = ref({
    orderId: '',
    userId: '',
    orderAmount: '',
    createTime: '',
    orderStatus: '',
    updateTime: '',
    contractId: '',
    tradeId: '',
    note: '',
})

// 表格数据
const tableData = ref([])

// 校验规则
const rules = {
    orderId: [
        { required: true, message: '请输入订单号', trigger: 'blur' }
    ],
    userId: [
        { required: true, message: '请输入负责人ID', trigger: 'blur' }
    ],
    departmentId: [
        { required: true, message: '请选择部门', trigger: 'change' }
    ],
    position: [
        { required: true, message: '请输入职位', trigger: 'blur' }
    ],
    phone: [
        { required: true, message: '请输入联系电话', trigger: 'blur' },
        {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
        }
    ],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
        }
    ],
    hireDate: [
        { required: true, message: '请选择入职日期', trigger: 'change' }
    ],
    staffStatus: [
        { required: true, message: '请选择状态', trigger: 'change' }
    ]
}

// 日期格式化方法
function formatDate(dateString) {
    if (!dateString) return '';
    const date = new Date(dateString);
    return date.toISOString().split('T')[0]; // 格式化为 YYYY-MM-DD
}

// 修改
// function handleEdit(row) {
//     resetForm();
//     if (row == null) {
//         row = selectRow.value[0];
//     }
//     disabled.value = true
//     selected.value = 'edit'
//     const data = {
//         orderId: row.orderId
//     }
//     getAllCampusOrder(data).then(res => {
//         formData.value = res.data.campusOrders;
//         dialogVisible.value = true
//     })
// }

// 删除
// function handleDelete(row) {
//     if (row == null) {
//         row = selectRow.value.map(item => {
//             return item.staffId
//         })
//     } else {
//         row = [row.staffId]
//     }
//     deleteRow.value = row
//     deleteDialog.value = true;
// }

// 删除确认
// function deleteConfirm() {
//     deleteStaff(deleteRow.value).then(res => {
//         if (res.code === 500) {
//             ElMessage.error(res.message);
//         } else {
//             ElMessage.success("删除成功")
//         }
//         getStaffList();
//     })
//     deleteDialog.value = false;
// }

// 新增
function handleAdd() {
    dialogVisible.value = true
    selected.value = 'add'
    resetForm();
}

// 每页条数变化
function handleSizeChange(val) {
    queryParams.value.pageSize = val;
    queryParams.value.pageNum = 1;
    getOrderList();
}

// 页码变化
function handleCurrentChange(val) {
    queryParams.value.pageNum = val;
    getOrderList();
}

// 关闭dialog
function handleCanle() {
    dialogVisible.value = false
    staffForm.value.resetFields();
    staffForm.value.clearValidate();
}

// 选中行
function handleSelectionChange(selected) {
    single.value = selected.length != 1
    multiple.value = selected.length == 0
    selectRow.value = selected;
}

// 确认提交
// function handleConfirm() {
//     staffForm.value.validate((valid) => {
//         if (valid) {
//             if (selected.value === 'add') {
//                 addStaff(formData.value).then(res => {
//                     if (res.code === 500) {
//                         ElMessage.error(res.message);
//                     } else {
//                         ElMessage.success("新增成功")
//                     }
//                     getOrderList();
//                     dialogVisible.value = false
//                 })
//             } else {
//                 updateStaff(formData.value).then(res => {
//                     if (res.code === 500) {
//                         ElMessage.error(res.message);
//                     } else {
//                         ElMessage.success("修改成功")
//                     }
//                     getOrderList();
//                     dialogVisible.value = false
//                 })
//             }
//         } else {
//             ElMessage.warning("请填写完整")
//         }
//     });
//     staffForm.value.clearValidate();
// }

// 搜索
function searchBtn() {
    queryParams.value.pageNum = 1;
    getOrderList()
}

// 重置
function resetBtn() {
    queryParams.value = {
        orderId: '',
        userId: '',
        orderAmount: '',
        createTime: '',
        orderStatus: '',
        updateTime: '',
        contractId: '',
        tradeId: '',
        note: '',
        pageNum: 1,
        pageSize: queryParams.value.pageSize
    }
    getOrderList()
}

// 重置表单
function resetForm() {
    formData.value = {
        orderId: '',
        userId: '',
        orderAmount: '',
        createTime: '',
        orderStatus: '',
        updateTime: '',
        contractId: '',
        tradeId: '',
        note: ''
    }
    disabled.value = false
    selected.value = 'add'
}

// 获取订单列表
async function getOrderList() {
    try {
        const res = await getAllCampusOrder(queryParams.value);
        if (res.data && res.data.campusOrders) {
            tableData.value = res.data.campusOrders.records || [];
            total.value = res.data.campusOrders.total || 0;
        }
        // queryParams.value.pageNum = res.data.campusOrders.records.pages
        // queryParams.value.pageSize = res.data.campusOrders.records.size
    } catch (error) {
        console.log(error)
    }
}

// 获取搜索订单列表
// async function getOrderList2() {
//     try {
//         const res = await getSelectByStatus(queryParams.value.orderStatus, queryParams.value.userId)
//             .then(res => {
//                 tableData.value = res.data.campusOrders;
//             });
//         total.value = res.data.total
//         // tableData.value = res.data.campusOrders
//     } catch (error) {
//         console.log(error)
//     }
// }
</script>

<style scoped>
.staff-management {
    height: auto;
    min-height: 100vh;
    width: calc(100% - 50px);
    float: left;
    position: relative; /* 添加这行 */
}

.head {
    margin-top: 20px;
    margin-left: 20px;
    width: calc(100% - 50px);
}

.middle {
    width: 100%;
    height: 8vh;
    margin-bottom: 20px;
}

.add {
    margin-top: 15px;
    margin-left: 45px;
    width: 5%;
    height: 50%;
    float: left;
}

.end {
    float: left;
    margin-bottom: 20px;
    width: calc(100% - 50px);
}

.demo-pagination-block {
    margin-top: 20px;
    margin-bottom: 20px; /* 添加底部边距 */
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 1;
}
</style>
